<template>
	<view>
		<uni-popup
			ref="addAccountRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title">
					{{ title }}
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<scroll-view scroll-y="true" class="popup-contents">
					<uni-forms :modelValue="formValue" ref="form">
						<uni-forms-item>
							<view class="title">户名</view>
							<uni-easyinput
								:placeholderStyle="placeholderStyle"
								ref="form"
								class="uni-mt-5"
								trim="all"
								v-model="formValue.name"
								placeholder="请填写收款人姓名"
							></uni-easyinput>
							<view class="emptyAll"></view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="title">卡号</view>
							<uni-easyinput
								:placeholderStyle="placeholderStyle"
								ref="form"
								class="uni-mt-5"
								trim="all"
								type="number"
								v-model="formValue.cardNo"
								placeholder="请填写收款人储蓄卡号"
							></uni-easyinput>
							<view class="emptyAll"></view>
						</uni-forms-item>
						<uni-forms-item>
							<view class="title">银行</view>
							<view class="bankContet">
								<uni-easyinput
									:placeholderStyle="placeholderStyle"
									ref="form"
									class="select"
									trim="all"
									v-model="formValue.bankName"
									:clearable="false"
									placeholder="请选择银行"
								></uni-easyinput>
								<view
									class="emtpy"
									@click="handlerSelect"
								></view>
							</view>
							<view class="emptyAll"></view>
						</uni-forms-item>
						<!-- <uni-forms-item>
              <view class="title">银行所在地区</view>
              <uni-easyinput
                :placeholderStyle="placeholderStyle"
                ref="form"
                class="uni-mt-5"
                trim="all"
                v-model="formValue.bankArea"
                placeholder="请填写银行所在地区"
              ></uni-easyinput>
              <view class="emptyAll"></view>
            </uni-forms-item> -->
						<uni-forms-item>
							<view class="title">银行所在支行</view>
							<uni-easyinput
								:placeholderStyle="placeholderStyle"
								ref="form"
								class="uni-mt-5"
								trim="all"
								v-model="formValue.subBankName"
								placeholder="请填写银行所在支行"
							></uni-easyinput>
							<view class="emptyAll"></view>
						</uni-forms-item>
					</uni-forms>
					<view class="duo"></view>
				</scroll-view>
			</view>
			<view class="bottom-button-bd"
				><button
					:class="isClick ? '' : 'disable'"
					class="primary-button w80"
					@tap.stop="handlerSure"
				>
					确定
				</button></view
			>
		</uni-popup>
		<select-pick
			title="银行选择"
			:showPick="showPick"
			@close="close"
			@submit="submit"
			:list="list"
		></select-pick>
	</view>
</template>
<script>
import {
	insertcostAccountInfo,
	updatecostAccountInfo,
} from '@/subPackagesIndex/pages/index/approval/launch/apis/account.js'
import selectPick from '@/components/select-pick/select-pick.vue'
export default {
	props: {
		showAddAccount: {
			type: Boolean,
			default: false,
		},
		infoValue: {
			type: Object,
			default: () => {},
		},
		title: {
			type: String,
			default: '',
		},
	},
	components: {
		selectPick,
	},
	data() {
		return {
			formValue: {
				name: '',
				cardNo: '',
				bankName: '',
				bankArea: '',
				subBankName: '',
			},
			showPick: false,
			list: [
				{ value: '中国工商银行', text: '中国工商银行' },
				{ value: '中国农业银行', text: '中国农业银行' },
				{ value: '中国银行', text: '中国银行' },
				{ value: '中国建设银行', text: '中国建设银行' },
			],
			placeholderStyle: 'color:#b2b2b2;font-size:26rpx',
		}
	},
	onReady() {},
	computed: {
		isClick() {
			if (
				this.formValue.name &&
				this.formValue.cardNo &&
				this.formValue.bankName &&
				this.formValue.subBankName
			) {
				return true
			} else {
				return false
			}
		},
	},
	methods: {
		openPopup() {
			this.$refs.addAccountRef.open('bottom')
		},
		closePopup() {
			this.$refs.addAccountRef.close()
			this.$emit('close')
		},
		handlerAccount(item) {
			this.$emit('handlerAccount', item)
			this.closePopup()
		},
		close() {
			this.showPick = false
		},
		handlerSelect() {
			this.showPick = true
		},
		submit(value) {
			this.formValue = Object.assign(
				{},
				{
					...this.formValue,
					bankName: value,
				}
			)
			this.close()
		},
		handlerSure() {
			if (this.isClick) {
				let params = this.formValue
				if (params.id) {
					updatecostAccountInfo(params).then((res) => {
						this.$emit('close')
					})
				} else {
					insertcostAccountInfo(params).then((res) => {
						this.$emit('close')
					})
				}
			}
		},
	},
	watch: {
		showAddAccount(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
		infoValue(val) {
			this.formValue = {
				...val,
			}
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: calc(100vh - 500rpx);
	display: flex;
	flex-direction: column;
}
.popup-contents {
	width: 100%;
	padding: 32rpx 32rpx 0 32rpx;
	flex: 1;
	height: 0;
	box-sizing: border-box;
}
.bankContet {
	position: relative;
	.emtpy {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
		z-index: 100;
	}
}
.title {
	font-size: 32rpx;
	margin-bottom: 20rpx;
}
.duo {
	width: 100%;
	height: 120rpx;
}
.disable {
	opacity: 0.3;
}
.emptyAll {
	width: 100%;
	height: 24rpx;
}
/deep/ .uni-select__input-placeholder {
	font-size: 13rpx !important;
}
</style>
